<template>
	<view>
		<scroll-view class="chatroom-scoll" 
			id="message-area" 
			:scroll-into-view="viewID" 
			scroll-y="true" 
			scroll-with-animation="true" 
			scroll-anchoring="true">
		    <message-item class="message-item" 
				v-for="(item, index) in message" 
				:key="item.id" 
				:item="item" 
				:id="'msg_item_'+index">
			</message-item>
		</scroll-view>
	</view>
</template>

<script>
    import messageItem from './message-item.vue'
    export default {
		components:{
			messageItem
		},
        props: {
            message: {}
        },
		data(){
			return {
				viewID: ''
			}
		},
        watch: {
            message: function(nexto, preo) {
                if (nexto.length) {
                    //const last = nexto[nexto.length - 1]
					setTimeout(() => {
						this.viewID = 'msg_item_' + (nexto.length - 1);
					}, 100)
                }
            }
        },
    }
</script>

<style type="scss">
    .chatroom {
      overflow: hidden;
    }
    .chatroom-scoll {
        max-height: 30vh;
        widows: 100%;
        width: 55vw;
    }
    .message-item {
      width: 100%;
      display: block;
    }
</style>